<!--
 * @Author: miteng 973203639@qq.com
 * @Date: 2024-05-14 14:29:42
 * @LastEditors: yuanqingqing 1194367511@qq.com
 * @LastEditTime: 2024-08-21 15:14:32
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<script lang="ts" setup>
import { dealIcon } from '@/framework/utils/icon'
import { imgpath } from '@/framework/utils/auth';
import SvgIcon from '@/framework/components/SvgIcon/index.vue';
const icons = [] as string[];
const modules = import.meta.glob('@/assets/uploadSvg/*.svg');
for (const path in modules) {
    const p = path.split('assets/uploadSvg/')[1].split('.svg')[0];
    icons.push(p);
}
const props = defineProps({
    fileSize: {
        type: Number,
        default: 5
    },
    // 文件类型, 例如["doc", "xls", "ppt", "txt", "pdf"]
    fileType: {
        type: Array,
        default: () => ['png', 'jpg', 'jpeg']
    },
    iconType: {
        type: Number,
        default: 2
    },
    fileId: {
        type: String,
        default: ''
    },
    modelValue: {
        type: String,
        default: ''
    },
    iconColor: {
        type: String,
        default: 'linear-gradient(180deg, #FFCD87 0%, #CC5729 100%)'
    },
    icon: {
        type: String,
        default: ''
    }
})
const isSelfIcon = computed(() => {
    return !icons.includes(props.fileId) // false=》图标  true (tupian )
})
const fileUrl = computed(() => {
    return imgpath(props.fileId)
})
</script>
<template>
    <div class="reference-block" :style="{ background: isSelfIcon ? '' : props.iconColor }">
        <svg-icon v-if="!isSelfIcon" :icon-class="props.fileId" class-name="icon-bg" />
        <el-icon v-else-if="isSelfIcon && props.icon && dealIcon(props.icon)">
            <component class="icons" :is="dealIcon(props.icon)"></component>
        </el-icon>
        <el-image v-else-if="isSelfIcon && props.fileId" class="img" :src="fileUrl" />
    </div>
</template>
<style lang="scss" scoped>
.reference-block {
    position: relative;
    width: 48px;
    height: 48px;
    line-height: 56px;
    text-align: center;
    border-radius: 14px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    .img {
        width: 100%;
        height: 100%;
        border-radius: 14px;
    }

    .icon-bg {
        font-size: 32px;
    }


}

:deep(.svg-icon) {
    font-size: 32px;
    vertical-align: -0.15em;
}
</style>